<template>
	<view class="">

		<uni-card padding="0" spacing="0" margin="0">
			<div style="display: flex; padding-top: 8px;">
				<div style="flex: 2; text-align: right;">
					<img :src="publisherInfo.headImageSrc !== null ? imgBaseUrl + publisherInfo.headImageSrc : defaultAvatarImg"
						alt="头像" style="width: 70px; height: 70px; border-radius: 50%;">
				</div>
				<div style="line-height: 30px; margin-left: 20px; flex: 8;">
					<p style="font-size: 15px; font-weight: bold;">
						昵称：{{publisherInfo.nickname}}
					</p>
					<p style="font-size: 10px;">
						发布时间：{{confessionWallInfo.releaseTime}}
					</p>
				</div>
			</div>
		</uni-card>

		<uni-swiper-dot v-if="ImgSrcs.length !== 0" :info="ImgSrcs" :current="current" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in ImgSrcs" :key="index">
					<view class="swiper-item">
						<img @click="clickImg(index, ImgSrcs)" style="width: 100%; height: 600px;"
							:src="imgBaseUrl +  item" alt="图片">
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<div style="background-color: #FFF5F6; padding: 10px 10px;">
			<p style="text-indent: 10px; color: #FE526D; font-size: 20px;font-family:Georgia,Serif;">
				{{confessionWallInfo.wallCopy}}
			</p>
		</div>

		<uni-section title="发布者信息" type="line">
			<uni-list>
				<uni-list-item title="发布者所在高校 : " :rightText="publisherInfo.university" />
				<uni-row class="demo-uni-row">
					<uni-col :span="19">
						<uni-list-item title="QQ号" :rightText="QQ" />
					</uni-col>
					<uni-col :span="5">
						<view class="tag-view">
							<uni-tag text="复制qq号" @click="copyText(QQ)"
								custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
							</uni-tag>
						</view>
					</uni-col>
				</uni-row>
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
	import baseUrl from '../publicData/baseUrl.js'
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex'

	export default {
		name: "confessionWallInfo",

		data() {
			return {
				// 未上传头像的默认头像图片地址
				defaultAvatarImg: '',
				imgBaseUrl: baseUrl.imgBaseUrl,
				current: 0,
				mode: 'round',
				confessionWallInfo: {},
				ImgSrcs: [],
			}
		},

		computed: {
			...mapState('confessionWallModule', ["publisherInfo"]),
			...mapState('publicModule', ["token"]),
			QQ() {
				if(this.confessionWallInfo.selectContactInfoFlag === 1){
					return this.publisherInfo.QQMail.split("@")[0]
				}else{
					return " "
				}
			}
		},

		onLoad(option) {
			// 获取墙信息
			this.confessionWallInfo = JSON.parse(option.confessionWallInfo)
			if (this.confessionWallInfo.confessionWallImgs !== '') {
				this.ImgSrcs = JSON.parse(this.confessionWallInfo.confessionWallImgs)
			}

			// 获取墙信息发表者基本信息
			this.getPublisherInfo({
				uId: this.confessionWallInfo.uId,
				selectContactInfoFlag: this.confessionWallInfo.selectContactInfoFlag,
				token: this.token
			})
			
			// 当用户为上传头像，为其设置默认头像
			if (this.publisherInfo.headImageSrc === null) {
				this.publisherInfo.sex === '男' ? this.defaultAvatarImg = '../static/defaultAvatarImg/weidengru.png' : this
					.defaultAvatarImg = '../static/defaultAvatarImg/weidengru.png'
			} else {
			
			}
		},

		methods: {

			...mapActions('confessionWallModule', ["getPublisherInfo"]),
			...mapMutations('publicModule', ["copyText"]),

			// 改变当前点索引
			change(e) {
				this.current = e.detail.current;
			},

			// 点击图片放大预览
			clickImg(index, ImgSrcs) {
				const that = this
				let Imgs = ImgSrcs.map(item => {
					return that.imgBaseUrl + item
				})
				wx.previewImage({
					urls: Imgs, //需要预览的图片 http 链接列表，多张的时候，url直接写在后面就行了
					current: Imgs[index], // 当前显示图片的 http 链接，默认是第一个
				})
			}
		}
	}
</script>

<style scoped>
	.tag-view {
		margin-top: 11px;
	}

	.swiper-box {
		height: 500px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 500px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}
</style>